<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小王音乐</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--<meta http-equiv="X-UA-Compatible" name="" content="ie=edge"/>-->
		<link rel="stylesheet" type="text/css" href="css/xwyinyue.css"/>
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-size: 12px;
			}
			ul{
				list-style: none;
			}
			body{
				background-image: url(img/acg.jpg);
				background-size:100% ;
				position: relative;
				overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		
		
		<section id="xwyy">
			<!--主体区域-->
			<section class="box" style="margin-top: 50px;">
				
				<div class="nav">
					<div class="nava">
						<h1>小王音乐</h1>
					</div>
					<!--搜索框-->
					<div class="navb">
						<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" placeholder="搜索想听的歌"/>
					</div>
				</div>
				
				<div class="boxa">
					<!--歌曲列表-->
					<div class="boxa1">
						<ul>
							<li v-for="item in musicList">
								<a href="#" @click="playMusic(item.id)">▶</a>
								<label>{{item.name}}</label>
								<a href="#" v-if="item.mvid!=0" @click="playMv(item.mvid)"><i>🎵</i></a>
							</li>
						</ul>
					</div>
					<!--歌曲信息-->
					<div class="boxa2" :class="{playing:isPlayin}">
						<img src="img/cd1.png" class="imga"/ >
						<img src="img/cd.png" class="imgb autoRotate"/>
						<img :src="musicCover" class="imgc autoRotate"/>
					</div>
					<!--歌曲评论-->
					<div class="boxa3">
						<h1>热门评论</h1>
						
						<div class="boxa3_nr" v-for="item in hotComments">
							<div class="boxa3_nr1">
								<img :src="item.user.avatarUrl"/>
							</div>
							<div class="boxa3_nr2">
								<h3>{{item.nickname}}</h3>
								<div class="a3p">
									{{item.content}}
								</div>
							</div>
						</div>
						
					</div>
				</div>
				
				<!--播放音乐-->
				<div class="boxb">
					<audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop>
						
					</audio>
				</div>
				<div class="mv" v-show="isShow" >
					<video ref='video' :src="mvUrl" width="100%" height="100%"  controls="controls">
						
					</video>
				</div>
				<div class="mk" @click="hide" v-show="isShow">
						
				</div>
			</section>
			
		</section>
		
		

	</body>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/yinyue.js" type="text/javascript" charset="utf-8"></script>
</html>
